<template>
  <s-layout title="实名认证">
    <view class="safe-wrapper">
      <image class="img" src="/static/safe.png" />
      <view class="tips">信息安全保障中</view>
    </view>
    <view class="form-wrapper">
      <view class="title">请输入您的实名信息</view>
      <uni-forms
        ref="form"
        :model="state.model"
        :rules="state.rules"
        class="form-box"
      >
        <my-form-item required labelPosition="top" name="real_name" label="姓名">
          <my-input placeholder="请输入姓名" :disabled="userInfo.id_card_no"
                    v-model="state.model.real_name">
          </my-input>
        </my-form-item>
        <my-form-item required labelPosition="top" name="id_card" label="身份证号">
          <my-input placeholder="请输入身份证号"
                    :disabled="userInfo.id_card_no"
                    v-model="state.model.id_card">
          </my-input>
        </my-form-item>
        <view class="tips">国家政策规定，数藏仅支持年满18周岁至65周岁中国大陆
          用户购买
        </view>
      </uni-forms>
      <my-btn v-if="!userInfo.id_card_no" @tap.stop="handleComfrim">实名认证</my-btn>
    </view>
  </s-layout>
</template>

<script setup>

  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';

  const userInfo = computed(() => sheep.$store('user').userInfo);

  const state = reactive({
    model: {
      id_card: userInfo.value.id_card_no || '', captcha: '', 'real_name': userInfo.value.real_name || '',
    }, rules: {},
  });
  const handleComfrim = async () => {
    let { real_name, id_card } = state.model;
    if (!real_name) {
      sheep.$helper.toast('请输入姓名');
      return;
    }
    if (!id_card) {
      sheep.$helper.toast('请输入身份证号');
      return;
    }
    const { code, data, msg } = await sheep.$api.user.idCardOauth({ ...state.model });
    if (code === 1) {
      sheep.$helper.toast(msg);
      sheep.$router.go('/pages/index/user');
    }else{
      sheep.$helper.toast(msg);
    }
  };
</script>


<style scoped lang="scss">
  .safe-wrapper {
    padding: 120rpx 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .img {
      width: 116rpx;
      height: 137rpx;
    }

    .tips {
      font-size: 34rpx;
      margin-top: 35rpx;
      color: #898989;
    }
  }

  .form-wrapper {
    padding: 0 30rpx;

    .title {
      font-size: 32rpx;
      color: #FFFFFF;
      margin-bottom: 43rpx;
    }

    .tips {
      text-align: center;
      padding: 0 30rpx;
      font-size: 24rpx;
      color: #5A5A5A;
      margin-top: 53rpx;
      margin-bottom: 59rpx;
    }
  }
</style>
